
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>vue.js</title>
        <meta charset="utf-8">
        <meta name="description" content="Vue.js - Intuitive, Fast and Composable MVVM for building interactive interfaces.">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <link href='//fonts.googleapis.com/css?family=Source+Sans+Pro:400,600|Roboto Mono' rel='stylesheet' type='text/css'>
        <link href='//fonts.googleapis.com/css?family=Dosis:300,500&text=Vue.js' rel='stylesheet' type='text/css'>
        <link href="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" rel='stylesheet' type='text/css'>
        <link rel="icon" href="/images/logo.png" type="image/x-icon">
        <script>
            window.PAGE_TYPE = ""
        </script>
        <link rel="stylesheet" href="/css/page.css">
        <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-46852172-1', 'vuejs.org');
  ga('send', 'pageview');
</script>
        <script src="/js/vue.js"></script>
    </head>
    <body>
        <div id="mobile-bar">
            <a class="menu-button"></a>
            <a class="logo" href="/"></a>
        </div>
        
            <div id="header">
    <a id="logo" href="/">
        <img src="/images/logo.png">
        <span>Vue.js</span>
    </a>
    <ul id="nav">
        <li>
  <form id="search-form">
    <input type="text" id="search-query-nav" class="search-query st-default-search-input">
  </form>
</li>
<li><a href="/guide/" class="nav-link">Guide</a></li>
<li><a href="/api/" class="nav-link">API</a></li>
<li><a href="/examples/" class="nav-link">Examples</a></li>
<li><a href="/blog/" class="nav-link">Blog</a></li>
<li class="nav-dropdown-container">
  <a class="nav-link">Community</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://github.com/vuejs/vue" class="nav-link" target="_blank">GitHub</a></li>
    <li><a href="http://forum.vuejs.org" class="nav-link" target="_blank">Forum</a></li>
    <li><a href="https://gitter.im/vuejs/vue" class="nav-link" target="_blank">Chat</a></li>
    <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
  </ul>
</li>


    </ul>
</div>

            <div id="main">
                
                    <div id="hero">
  <div class="inner">
    <ul id="nav">
      <li><a href="/guide/" class="nav-link">Guide</a></li>
      <li><a href="/api/" class="nav-link">API</a></li>
      <li><a href="/examples/" class="nav-link">Examples</a></li>
      <li><a href="/blog" class="nav-link">Blog</a></li>
      <li class="nav-dropdown-container">
  <a class="nav-link">Community</a><span class="arrow"></span>
  <ul class="nav-dropdown">
    <li><a href="https://github.com/vuejs/vue" class="nav-link" target="_blank">GitHub</a></li>
    <li><a href="http://forum.vuejs.org" class="nav-link" target="_blank">Forum</a></li>
    <li><a href="https://gitter.im/vuejs/vue" class="nav-link" target="_blank">Chat</a></li>
    <li><a href="https://twitter.com/vuejs" class="nav-link" target="_blank">Twitter</a></li>
  </ul>
</li>

    </ul>
    <div id="logo-wrap">
      <img id="logo" src="/images/logo.png">
      <h1>Vue.js</h1>
    </div>
    <p class="desc">Reactive Components for Modern Web Interfaces</p>
    <p class="buttons">
      <a href="/guide/installation.html" class="small-button">Install v1.0.28</a>
      <a href="/guide/index.html" class="small-button">Get Started</a>
    </p>
    <ul id="social">
      <li><a href="https://twitter.com/vuejs" class="twitter-follow-button" data-show-count="false" data-dnt="true">Follow @vuejs</a></li>
      <li><iframe src="//ghbtns.com/github-btn.html?user=vuejs&repo=vue&type=watch&count=true"
    allowtransparency="true" frameborder="0" scrolling="0" width="100" height="20"></iframe></li>
      <li id="donate">
        <span class="wrapper" style="width: 108px">
          <img src="/images/patreon.png">
          <a href="/support-vuejs">Support Vue.js</a>
        </span>
      </li>
    </ul>

    <ul id="translations">
      <li><a href="http://cn.vuejs.org" class="nav-link">中文</a></li>
      <li class="delimiter">|</li>
      <li><a href="http://jp.vuejs.org" class="nav-link">日本語</a></li>
      <li class="delimiter">|</li>
      <li><a href="http://it.vuejs.org" class="nav-link">Italiano</a></li>
    </ul>

    <div id="sponsors">
      <span>Proudly sponsored by</span>
<br>
<a href="https://www.itunescn.com/" target="_blank" style="top:2px">
  <img src="/images/itunescn.png">
</a>
<a href="https://jsfiddle.net/" target="_blank">
  <img src="/images/jsfiddle.png">
</a>
<a href="https://laravel.com/" target="_blank">
  <img src="/images/laravel.png">
</a>
<a href="https://chaitin.cn" target="_blank" style="top:-1px">
  <img src="/images/chaitin.png">
</a>
<a href="https://htmlburger.com" target="_blank">
  <img src="/images/htmlburger.png">
</a>
<a href="https://starter.someline.com/" target="_blank" style="top:-2px">
  <img src="/images/someline.png">
</a>
<a href="http://gold.xitu.io/?utm_source=vuejs&utm_medium=image&utm_content=juejin&utm_campaign=q3_website" target="_blank" style="width:75px">
  <img src="/images/juejin.png" style="width:75px">
</a>
<a href="http://monterail.com/" target="_blank">
  <img src="/images/monterail.png">
</a>
<a href="https://www.trisoft.ro/" target="_blank" style="width:80px;top:-1px">
  <img src="/images/trisoft.png" style="width:80px">
</a>

    </div>
  </div>

  <div class="down"><img src="/images/down.png"></div>
</div>

<div id="sponsors-mobile">
  <span>Proudly sponsored by</span>
<br>
<a href="https://www.itunescn.com/" target="_blank" style="top:2px">
  <img src="/images/itunescn.png">
</a>
<a href="https://jsfiddle.net/" target="_blank">
  <img src="/images/jsfiddle.png">
</a>
<a href="https://laravel.com/" target="_blank">
  <img src="/images/laravel.png">
</a>
<a href="https://chaitin.cn" target="_blank" style="top:-1px">
  <img src="/images/chaitin.png">
</a>
<a href="https://htmlburger.com" target="_blank">
  <img src="/images/htmlburger.png">
</a>
<a href="https://starter.someline.com/" target="_blank" style="top:-2px">
  <img src="/images/someline.png">
</a>
<a href="http://gold.xitu.io/?utm_source=vuejs&utm_medium=image&utm_content=juejin&utm_campaign=q3_website" target="_blank" style="width:75px">
  <img src="/images/juejin.png" style="width:75px">
</a>
<a href="http://monterail.com/" target="_blank">
  <img src="/images/monterail.png">
</a>
<a href="https://www.trisoft.ro/" target="_blank" style="width:80px;top:-1px">
  <img src="/images/trisoft.png" style="width:80px">
</a>

</div>

<div id="example">
  <h2>10 Second Example</h2>
  <div class="block">
    <figure class="highlight lang-html"><table><tbody><tr><td class="gutter"><pre>1
2
3
4
</pre></td><td class="code"><pre><span class="tag">&lt;<span class="title">div</span> <span class="attribute">id</span>=<span class="value">"demo"</span>&gt;</span>
  <span class="tag">&lt;<span class="title">p</span>&gt;</span>{{message}}<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
  <span class="tag">&lt;<span class="title">input</span> <span class="attribute">v-model</span>=<span class="value">"message"</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>
</pre></td></tr></tbody></table></figure>
  </div>

  <div class="sign">+</div>

  <div class="block">
    <figure class="highlight lang-js"><table><tbody><tr><td class="gutter"><pre>1
2
3
4
5
6
</pre></td><td class="code"><pre><span class="keyword">var</span> demo = <span class="keyword">new</span> Vue({
  el: <span class="string">'#demo'</span>,
  data: {
    message: <span class="string">'Hello Vue.js!'</span>
  }
})
</pre></td></tr></tbody></table></figure>
  </div>

  <div class="sign">=</div>

  <div class="block result">
    <div id="demo">
      <p>{{message}}</p>
      <input v-model="message">
    </div>
    <script>
    var demo = new Vue({
      el: '#demo',
      data: {
        message: 'Hello Vue.js!'
      }
    })
    </script>
  </div>
</div>
<div id="features">
  <div class="feats">
    <div class="feat">
      <h2><span class="icon simple"></span>Simple</h2>
      <p>Write some HTML, grab some JSON, create a Vue instance, that's it.</p>
    </div>
    <div class="feat">
      <h2><span class="icon powerful"></span>Reactive</h2>
      <p>Expressions & computed properties with transparent dependency tracking.</p>
    </div>
    <div class="feat">
      <h2><span class="icon composable"></span>Components</h2>
      <p>Compose your application with decoupled, reusable components.</p>
    </div>
    <div class="feat">
      <h2><span class="icon compact"></span>Compact</h2>
      <p>~24kb min+gzip, no dependencies.</p>
    </div>
    <div class="feat">
      <h2><span class="icon fast"></span>Fast</h2>
      <p>Precise and efficient async batch DOM updates.</p>
    </div>
    <div class="feat">
      <h2><span class="icon module"></span>Package Ready</h2>
      <p>Install via NPM or Bower - leverage your favorite eco system!</p>
    </div>
  </div>
</div>
<div id="why">
  <h2>You should try it out if you like:</h2>
  <ul>
    <li>Extendable Data bindings</li>
    <li>Plain JS object models</li>
    <li>APIs that simply make sense</li>
    <li>Building UIs by composing components</li>
    <li>Mixing &amp; matching small libraries</li>
  </ul>
</div>
<div id="footer">
  <a class="start" href="/guide/index.html">Get Started</a>
  <p>Released under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT License</a></p>
  <p>Copyright (c) 2016 <a href="http://evanyou.me" target="_blank">Evan You</a></p>
</div>

<!-- Twitter follow button script -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

                
            </div>
            <script src="//cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
            <script src="/js/smooth-scroll.min.js"></script>
            <script src="/js/common.js"></script>
        

        <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/1.0.6/fastclick.min.js"></script><script src="https://cdn.jsdelivr.net/gh/shentao/vuejs-outdated-docs-modal@v1.3/prompt.min.js"></script>
        <script>
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        </script>
    </body>
</html>
